<template>
  <view>
	  <navbar>文字</navbar>
	  <view :class="c_card">
      <view :class="c_title1">字体大小</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">fs-xx(8~100):</text
        >{font-size:(8~100)rpx;}
       </view>
	   <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
       </view>
      <view class="dp-f ai-c jc-sa mt-20 w-500 h-100 bg-f1">
        <view class="fs-16">
          fs-16
        </view>
        <view class="fs-24">
          fs-24
        </view>
        <view class="fs-32">
          fs-32
        </view>
        <view class="fs-40">
          fs-40
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view :class="c_title1">行高</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">lh-xx(8~100):</text
        >{line-height:(8~100)rpx;}
       </view>
	   <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
       </view>
      <view class="dp-f ai-c jc-sb mt-20 w-620 h-200 fs-32">
        <view class="h-200 w-200 bg-f1 lh-24">
          lh-24 lh-24 lh-24 lh-24 lh-24 lh-24 lh-24 lh-24 lh-24 lh-24
        </view>
        <view class="h-200 w-200 bg-f1 lh-30">
          lh-30 lh-30 lh-30 lh-30 lh-30 lh-30 lh-30 lh-30 lh-30 lh-30
        </view>
        <view class="h-200 w-200 bg-f1 lh-48">
          lh-48 lh-48 lh-48 lh-48 lh-48 lh-48 lh-48
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view :class="c_title1">对齐方式</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">ta-c:</text>{text-align: center;}/*
        居中对齐 */
       </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">ta-l:</text>{text-align: left;}/*
        左对齐 */
       </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">ta-r:</text>{text-align: right;}/*
        右对齐 */
       </view>
	   <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
       </view>
      <view class="dp-f jc-sb mt-20 w-500 fs-32">
        <view class="w-150 bg-f1 ta-c lh-40">
          ta-c
        </view>
        <view class="w-150 bg-f1 ta-l lh-40">
          ta-l
        </view>
        <view class="w-150 bg-f1 ta-r lh-40">
          ta-r
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view :class="c_title1">字体粗细</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">fw-b:</text>{font-weight: bold;}/*
        粗体 */
       </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">fw-l:</text>{font-weight:
        lighter;}/* 细体 */
       </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">fw-n:</text>{font-weight:
        normal;}/* 默认-用于父级已声明粗细时子元素重置字体宽度 */
       </view>
	   <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
       </view>
      <view class="dp-f ai-c jc-sb mt-20 w-600 h-200 fs-32">
        <view class="w-100 h-100 bg-f1 fw-b dp-fc">
          fw-b
        </view>
        <view class="w-100 h-100 bg-f1 fw-l dp-fc">
          fw-l
        </view>
        <view class="w-300 h-200 bg-f1 fw-b dp-fc fd-c">
          父元素：fw-b
          <view class="w-200 h-50 fw-n bg-999 dp-fc">
            子元素：fw-n
          </view>
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view :class="c_title1">特殊处理</view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">td-lt:</text
        >{text-decoration:line-through;}/* 加删除线 */
       </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">t-oh:</text>{white-space:
        nowrap;overflow: hidden;text-overflow: ellipsis;}/* 单行溢出显示省略号
        */
       </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">t-ohs:</text>{display:
        -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient:
        vertical;-webkit-line-clamp: 2;}/*
        多行溢出显示省略号，默认2行，其它行数请后接<text
          class="bg-f1 fw-b"
          >t-lcx(3~15)</text
        >*/
       </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">t-lcx(3~15):</text
        >{-webkit-line-clamp: x(3~15);}/* 规定显示的行数，超出后显示省略号 */
       </view>
	   <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
       </view>
      <view class="mt-20">
          <view>
          <view>class="<text class="fw-b c-red">td-lt</text>"</view>
          <view class="w-300 h-300 dp-fc b-1 td-lt mt-20">
             删除线
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-20">
          <view>class="<text class="fw-b c-red">t-oh</text>"</view>
          <view class="w-300 h-300 dp-fc mt-20">
            <view class="w-300 b-1 t-oh">
              文字文字文字文字文字文字文字文字文字文字文字
            </view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-20">
          <view>class="<text class="fw-b c-red">t-ohs</text>"</view>
          <view class="w-300 h-300 dp-fc mt-20">
            <view class="w-300 t-ohs b-1">
              文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            </view>
          </view>
        </view>
		<view class="pb-32 b-b1"></view>
        <view class="mt-20">
          <view>class="<text class="fw-b c-red">t-ohs t-lc5</text>"</view>
          <view class="w-300 h-300 dp-fc mt-20">
            <view class="w-300 t-ohs t-lc5 b-1">
              文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
